<template>
  <div class="fee-tlt">
    <div class="tlt-name">
      <span class="tag-name">{{ feeCategoryName }}</span>
      <span class="tag-online" v-if="fee.feeTypeName">{{ fee.feeTypeName }}</span>
      <span class="tag-cost" v-if="fee.costTypeName">{{ fee.costTypeName }}</span>
    </div>
    <div class="tlt-price">{{ fee.costTypeName === '收款' ? '应收' : '应付' }}：{{ unitVal(fee.totalAmount, '元') }}</div>
  </div>
  <div class="fee-msg-box">
    <div class="fee-msg">
      <div class="msg-box">
        <div class="msg">
          <div class="msg-item">
            <!-- 车辆购置费|| 车辆购置补充费 -->
            <div class="msg-item-label" v-if="fee.feeCategory == 0 || fee.feeCategory == 5">车辆购置单号：</div>
            <!-- 车辆借调费 -->
            <div class="msg-item-label" v-else-if="fee.feeCategory == 6">借调单号：</div>
            <div class="msg-item-label" v-else>车辆费用单号：</div>
            <div class="msg-item-value">{{ fee.businesCode || '-' }}</div>
          </div>
          <div class="msg-item">
            <!-- 车辆借调 -->
            <div class="msg-item-label" v-if="fee.feeCategory == 6">借调同行：</div>
            <div class="msg-item-label" v-else>汽车销售供应商：</div>
            <div class="msg-item-value">{{ fee.supplierName || '-' }}</div>
          </div>
          <div class="msg-item">
            <div class="msg-item-label">车牌号：</div>
            <div class="msg-item-value">{{ fee.carLicenseNo || '-' }}</div>
          </div>
          <!-- 车辆借调费显示借调周期 -->
          <div class="msg-item" v-if="fee.feeCategory == 6" style="margin-top: 16px; width: 100%">
            <div class="msg-item-label">借调周期：</div>
            <div class="msg-item-value" v-if="fee.startTime || fee.endTime">{{ fee.startTime ?? '-' }} 至 {{ fee.endTime ?? '-' }}</div>
            <div class="msg-item-value" v-else>-</div>
          </div>
        </div>
      </div>
      <template v-if="fee.feeDetailList.length > 0">
        <div class="msg-open-box">
          <div class="msg-open" @click="showFee" v-if="fee.feeDetailList && !feeShow">展开 <icon-down /></div>
          <div class="msg-open" @click="showFee" v-if="fee.feeDetailList && feeShow">收起 <icon-up /></div>
        </div>
      </template>
    </div>
    <template v-if="feeShow && fee.feeDetailList.length > 0">
      <a-divider />
      <div class="fee-table" v-if="fee.feeDetailList">
        <div class="table-items" v-for="(item, index) in fee.feeDetailList" :key="index">
          <div class="item-row">
            <div class="item-pro">
              {{ getFeeName(item) }}
            </div>
            <div class="item-pro">{{ item.costTypeStr }}</div>
            <div class="item-pro item-pro-remark">{{ item.remark }}</div>
            <div class="item-pro item-amount">{{ unitVal(item.amount, '元') }}</div>
          </div>
          <!-- <a-divider /> -->
        </div>
        <template v-if="![1, 2].includes(fee.feeStatus)">
          <a-divider />
          <!-- 已收款，已付款不显示待收、待付，兼容流水 -->
          <div class="item-row" style="width: 100%">
            <!-- 待收金额：显示全部金额，因为没有部分结算 -->
            <div class="item-pro text-right item-amount"
              >{{ fee.costType === 0 ? '待收' : '待付' }}：{{ unitVal(fee.totalAmount, '元') }}</div
            >
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script setup name="ShortOrderCost" lang="ts">
  import { unitVal } from '@/utils'
  import { ref, computed } from 'vue'

  const feeShow = ref(true)
  const showFee = () => {
    feeShow.value = !feeShow.value
  }
  const props = defineProps({
    fee: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })

  // 费用一级名称
  const feeCategoryName = computed(() => {
    const { feeCategory, installment, feeCategoryName, feeName, feeDetailList } = props.fee
    // 车辆购置费-手动添加
    if (feeCategory == 5) {
      return feeName
      // 借调费
    } else if (feeCategory == 6) {
      // 批量结算，此时只显示一级名称
      if (feeDetailList.length > 1) {
        return feeCategoryName
      } else {
        // 分期显示一级+二级名称
        if (installment == 1) {
          return feeCategoryName + '-' + feeName
        } else {
          return feeName
        }
      }
    } else {
      if (feeDetailList.length > 1) {
        return feeCategoryName
      } else {
        return feeCategoryName + '-' + feeName
      }
    }
  })

  // 费用二级名称
  const getFeeName = (fee: any) => {
    const { feeCategory, installment, feeCategoryName } = props.fee
    const feeName = fee.itemName
    // 车辆购置费-手动添加
    if (feeCategory == 5) {
      return feeName
      // 借调费
    } else if (feeCategory == 6) {
      // 分期显示一级+二级名称
      if (installment == 1) {
        return feeCategoryName + '-' + feeName
      } else {
        return feeName
      }
    } else {
      return feeCategoryName + '-' + feeName
    }
  }
</script>

<style lang="less" scoped>
  .flex-end {
    width: 100% !important;
    justify-content: flex-end;
    margin-bottom: 0 !important;
  }
  .fee-tlt {
    width: 100%;
    height: 40px;
    background-color: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tlt-name {
      .tag-name {
        font-weight: 600;
        font-size: 14px;
        margin-left: 20px;
      }
      .tag-online {
        font-size: 12px;
        padding: 0 8px;
        border-radius: 2px;
        border: 1px solid #3491fa;
        color: #3491fa;
        background: #e8f7ff;
        margin-left: 12px;
      }
      .tag-cost {
        font-size: 12px;
        padding: 0 8px;
        border-radius: 2px;
        border: 1px solid #ff7d00;
        color: #ff7d00;
        background: #fff7e8;
        margin-left: 12px;
      }
    }
    .tlt-price {
      font-size: 14px;
      color: #1890ff;
      font-weight: 600;
      margin-right: 20px;
    }
  }

  .fee-msg-box {
    margin-bottom: 20px;
    border: 1px solid #f2f3f5;
    padding: 20px 20px;
  }
  .msg-open-box {
    margin-left: 35px;
  }
  .fee-msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .msg-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .msg {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .msg-item {
        display: flex;
        font-size: 14px;
        width: 33.3%;
        .msg-item-label {
          color: var(--color-neutral-8);
        }
        .msg-item-value {
          color: var(--color-neutral-10);
        }
      }
    }
    .msg-open {
      width: 55px;
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .fee-table {
    background: #fbfbfc;
    padding: 20px 20px;
    width: 100%;
    .table-items {
      width: 100%;
      line-height: 28px;
      .item-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-pro {
          font-weight: 600;
          width: 200px;
        }
        .item-pro-twice {
          font-weight: 400;
          margin-left: 14px;
        }
        .item-amount {
          font-weight: 400;
          text-align: right;
        }
        .open-icon {
          margin-left: 2px;
        }
        .open-icon-close {
          transform: rotate(180deg);
        }
        .item-pro-remark {
          flex: 1;
          max-width: 600px;
        }
      }
    }
  }
</style>
